<template>
	<div class="transit table-wrap" ref="tableRef">
		<div class="title-list">
			<SecondTitle
				:title="`${busLineTime.lineName} ${busLineTime.direction}`"
				:rightSlot="`首班车 ${busLineTime.firstTime}`"
			/>
			<SecondTitle
				:title="`${busLineTime.lineName} ${busLineTime.direction}`"
				:rightSlot="`末班车 ${busLineTime.lastTime}`"
			/>
		</div>
		<el-table
			:data="tableData"
			style="width: 100%"
			:height="resetSize(600)"
			class="c-table"
			header-row-class-name="t-head"
			header-cell-class-name="t-head-cell"
			cell-class-name="t-body-cell"
			row-class-name="t-body-row"
			align="center"
		>
			<el-table-column prop="lineName" label="线路" />
			<el-table-column prop="direction" label="方向" />
			<el-table-column prop="firstArrivalTime" label="第一辆到达所需时间">
				<template #default="scope">
					<span >{{ scope.row.firstArrivalTime }} 分钟</span>
				</template>
			</el-table-column>
			<el-table-column prop="firstArrivalPassengerCapacity" label="第一辆车载客率">
				<template #default="scope">
					<span >{{ scope.row.firstArrivalPassengerCapacity }} %</span>
				</template>
			</el-table-column>
			<el-table-column prop="secondArrivalTime" label="第二辆到达所需时间">
				<template #default="scope">
					<span >{{ scope.row.secondArrivalTime }} 分钟</span>
				</template>
			</el-table-column>
			<el-table-column prop="secondArrivalPassengerCapacity" label="第二辆车载客率">
				<template #default="scope">
					<span >{{ scope.row.secondArrivalPassengerCapacity }} %</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			class="c-pagination"
			:teleported="false"
			popper-class="c-popper"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 50, 100]"
			:size="'small'"
			layout="total,  prev, pager, next, sizes"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>
<script lang="ts" setup>
	import { getSubwayList } from '@/api/train'
	import { computed, onMounted, ref, watch } from 'vue'
	import { resetSize } from '@/utils/reset'
	import { useScroll } from '@/hooks/useScroll'
	import { getCityBusLine } from '@/global'
	const busName: any = defineModel('busName')
	const currentPage = ref(1)
	const pageSize = ref(10)
	// const cityBusLineList = getCityBusLine()
	const total = ref(0);
	const cityBusLineList = ref([])
	let busLineIndex = 1
	const busLineTime = ref<any>([])
	const searchList = ref<any>([])
	const tableData = ref<any>([])
	const tableRef = ref()
	const scrollInfo = ref<any>({})

	const alreadyShowScroll = ref(false)
	onMounted(async () => {
		await getTrainListFunc('')
		scrollInfo.value = useScroll(tableRef.value, currentPage, cityBusLineList, pageSize)
		if (busLineIndex >= cityBusLineList.value.length) {
			busLineIndex = 1
		}
		busLineIndex++;
		busLineTime.value = cityBusLineList.value[busLineIndex - 1]
		setInterval(() => {
			// scrollInfo.value = useScroll(tableRef.value, currentPage, cityBusLineList, pageSize)
			if (busLineIndex >= cityBusLineList.value.length) {
				busLineIndex = 1
			}
			busLineIndex++
			busLineTime.value = cityBusLineList.value[busLineIndex - 1]
		}, 5000);
		// setInterval(() => {
		// 	if (busLineIndex >= cityBusLineList.value.length) {
		// 		busLineIndex = 1
		// 	}
		// 	busLineIndex++
		// 	busLineTime.value = cityBusLineList.value[busLineIndex - 1]
		// }, 5000)
	})

	const getTrainListFunc = async (name: string) => {
		console.log("name is ", name);
		let params = {
			pageSize: pageSize.value,
			pageNum: currentPage.value,
			name: name ? name : ''
		}
		await getSubwayList(params).then((res: any) => {
			console.log("getSubwayList========", res.data.records)
			cityBusLineList.value = res.data.records
			tableData.value = res.data.records
			total.value = res.data.total
			
			// if (alreadyShowScroll.value) return;
			// scrollInfo.value = useScroll(tableRef.value, currentPage, cityBusLineList, pageSize)
			// alreadyShowScroll.value = true
		})
	}

	const handleSizeChange = async (pageNum: any) => {
		// currentPage.value = pageNum;
		await getTrainListFunc(busName.value)
	}
	const handleCurrentChange = async () => {
		await getTrainListFunc(busName.value)
	}
	const getData = (list: any) => {
		if (scrollInfo.value.setScroll) {
			scrollInfo.value.scrollTop = 0
			scrollInfo.value.setScroll()
		}
		let start = pageSize.value * (currentPage.value - 1)
		let end = currentPage.value * pageSize.value
		busLineTime.value = cityBusLineList.value[busLineIndex - 1]
		tableData.value = list.slice(start, end)
	}
	const search = async () => {
		// searchList.value = cityBusLineList.value.filter((item: any) => {
		// 	return item.name.includes(busName.value)
		// })
		// getData(searchList.value)
		await getTrainListFunc(busName.value)
	}
	const reset = async () => {
		// busName.value = undefined
		// currentPage.value = 1
		// getData(cityBusLineList.value)
		await getTrainListFunc('')
	}
	// watch(
	// 	cityBusLineList,
	// 	(cityBusLineList: any) => {
	// 		console.log("cityBusLineList", cityBusLineList)
	// 		if (cityBusLineList) {
	// 			getData(cityBusLineList)
	// 		}
	// 	},
	// 	{ deep: true, immediate: true },
	// )
	defineExpose({ search, reset })
</script>

<style lang="scss" scoped>
	// .table-wrap :deep(.el-pagination .btn-prev){
	// 	height: 40px;
	// }
	// .table-wrap :deep(.el-pagination .btn-next){
	// 	height: 40px;
	// }
	// .table-wrap :deep(.el-pagination .el-pager .number){
	// 	font-size: 25px;
	// 	height: 40px;
	// }
	.table-wrap :deep(.el-pagination__total){
		// font-size: 30px;
	}
	.table-wrap :deep(.el-pagination__sizes .el-select .el-select__selected-item span) {
		// font-size: 25px;  /* 输入框文字大小 */
		color: #fff;
	}

	/* 修改分页选择器的下拉菜单文字 */
	.table-wrap :deep(.el-pagination__sizes .el-select .el-popper .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-select-dropdown__item span) {
		// font-size: 25px;  /* 下拉选项文字大小 */
		color: #fff;
	}

	/* 修改分页选择器下拉菜单整体 */
	.el-pagination--small button, .el-pagination--small span {
		// font-size: 25px;  /* 下拉菜单统一字体 */
	}
	.title-list {
		// display: flex;
		display: none;
	}
	.transit {
		padding: 0 30px;
	}
</style>
